<script setup>
import { getAllTeachersDirection } from "@/api/innovation";
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { SUCCESS } from "@/core/constants/HttpStatus";

const teaDetailsData = ref([]);
const tdLoading = ref(false);

// 获取所有教师科研方向信息
const getDirection = async () => {
  try {
    tdLoading.value = true;
    const res = await getAllTeachersDirection();
    const { code, data, msg, pageMsg } = res.data;
    if (code == SUCCESS) {
      teaDetailsData.value = data;
    } else {
      throw new Error("数据加载失败");
    }
    tdLoading.value = false;
  } catch (error) {
    ElMessage.error(error.message || "数据加载失败");
  }
};

onMounted(() => {
  getDirection();
});
</script>

<template>
  <div class="teacherScience">
    <h3 class="sTitle">教师科研</h3>
    <div v-loading="tdLoading" style="min-height: 200px">
      <div class="tableBox">
        <div class="columnBox">
          <ul class="columnName">
            <li class="idCol">序号</li>
            <li class="teacherCol">教师</li>
            <li class="emailCol">邮箱</li>
            <li class="directionCol">研究方向</li>
          </ul>
        </div>
        <div class="contentBox">
          <div
            class="rowBox"
            v-for="(teaItem, teaIndex) in teaDetailsData"
            :key="teaIndex"
          >
            <ul class="rowContent">
              <li class="idRow">{{ teaIndex + 1 }}</li>
              <li class="teacherRow">{{ teaItem[0].sdName }}</li>
              <li class="emailRow">{{ teaItem[0].sdContact }}</li>
              <li class="directionRow">
                <ul class="directionUl">
                  <li
                    v-for="(teadiritem, teadirIndex) in teaItem"
                    :key="teadirIndex"
                  >
                    {{ teadirIndex + 1 }}.{{ teadiritem.sdDirectionName }}
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.sTitle {
  font-size: 20px;
  margin: 10px 0px 10px 10px;
  position: relative;
}
.sTitle:before {
  content: "";
  background-color: #1e9ab5;
  width: 4px;
  height: 18px;
  position: absolute;
  left: -10px;
  margin-top: 5px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
.tableBox {
  margin-top: 20px;
  width: 90%;
  .columnBox {
    .columnName {
      background-color: #0d7f99;
      color: white;
      height: 50px;
      display: flex;
      .idCol,
      .teacherCol {
        width: 120px;
        border-right: 1px solid white;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .emailCol {
        width: 250px;
        border-right: 1px solid white;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .directionCol {
        width: 510px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}

.contentBox {
  background-color: #f0f8ff;
  font-size: 15px;
  .rowBox:nth-child(odd) {
    background-color: white; /* 奇数行的颜色 */
  }
  .rowBox {
    .rowContent {
      height: 95px;
      display: flex;
      .idRow,
      .teacherRow {
        width: 120px;
        border-right: 1px solid #d7d7d7;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .emailRow {
        width: 250px;
        border-right: 1px solid #d7d7d7;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .directionRow {
        width: 510px;
        display: flex;
        align-items: center;
        .directionUl {
          padding-left: 30px;
        }
      }
    }
  }
}
</style>
